<template>
	<view class="btnwarp">
		<view class="btnwarp-border"></view>
		<view class="btnwarp-middle" :style="'left:' + moveX + ';top:' + moveY" @touchstart="handleTouchstart" @touchmove.prevent="handleTouchmove" @touchend="handleMiddelTouchend"></view>
		<view class="btnwarp-top" data-type="top" @tap.stop="handleTap" @longtap.stop="handleLongTap" @touchend="handleTouchend" @touchcancel="handleTouchend">
			<img class="btnwarp-icon" :src="topIcon ? '../../static/images/button/operation-up-sel.png' : '../../static/images/button/operation-up-nor.png'">
		</view> 
		<view class="btnwarp-bot" data-type="bot" @tap.stop="handleTap" @longtap.stop="handleLongTap" @touchend="handleTouchend" @touchcancel="handleTouchend">
			<img class="btnwarp-icon" :src="botIcon ? '../../static/images/button/operation-down-sel.png' : '../../static/images/button/operation-down-nor.png'">
		</view>
		<view class="btnwarp-left" data-type="left" @tap.stop="handleTap" @longtap.stop="handleLongTap" @touchend="handleTouchend" @touchcancel="handleTouchend">
			<img class="btnwarp-icon" :src="leftIcon ? '../../static/images/button/operation-l-sel.png' : '../../static/images/button/operation-l-nor.png'">
		</view>
		<view class="btnwarp-right" data-type="right" @tap.stop="handleTap" @longtap.stop="handleLongTap" @touchend="handleTouchend" @touchcancel="handleTouchend">
			<img class="btnwarp-icon" :src="rightIcon ? '../../static/images/button/operation-r-sel.png' : '../../static/images/button/operation-r-nor.png'">
		</view>
	</view>
</template>

<script>
	export default {
		props:['telecontrolTime'],
		data() {
			return {
				isLongtap: false, //是否正在长按元素
				topIcon: false, //icon是否高亮
				botIcon: false, //icon是否高亮
				leftIcon: false, //icon是否高亮
				rightIcon: false, //icon是否高亮
				
				moveY: '50%',
				moveX: '50%',
				
				middleClientX: '',
				middleClientY: '',
				
				longTapInterval: null,
			}
		},
		
		methods: {
			//上下左右点击事件
			handleTap: function(e) {
				e.preventDefault()
				this.handleChangeIcon(e.currentTarget.dataset.type, true)
				setTimeout(() => {
					this.handleChangeIcon(e.currentTarget.dataset.type, false)
					this.longTapInterval && clearInterval(this.longTapInterval)
				}, 300)
				this.$mff.vibrate()
				this.$emit('handleChangeTelecontrol', e.currentTarget.dataset.type)
			},
			//上下左右长按事件
			handleLongTap: function(e) {
				e.preventDefault()
				this.isLongtap = true;
				this.handleChangeIcon(e.currentTarget.dataset.type, true)
				this.longTapInterval = setInterval(() => {
					this.$mff.vibrate()
					this.$emit('handleChangeTelecontrol', e.currentTarget.dataset.type)
				}, this.telecontrolTime)
			},
			//长按结束
			handleTouchend: function(e) {
				if(this.isLongtap) {
					this.isLongtap = false;
					this.handleChangeIcon(e.currentTarget.dataset.type, false)
				}
				this.longTapInterval && clearInterval(this.longTapInterval)
			},
			
			// 圆点触摸
			handleTouchstart: function(event) {
				this.middleClientX = event.touches[0].clientX
				this.middleClientY = event.touches[0].clientY
				
			},
			// 圆点拖拽
			handleTouchmove: function(event) {
				let x = this.middleClientX - event.touches[0].clientX;
				let y = this.middleClientY - event.touches[0].clientY;
				if(x >= 90) x = 90
				if(x <= -90) x = -90
				if(y >= 90) y = 90
				if(y <= -90) y = -90
				this.moveY = 150 + x + 'rpx';
				this.moveX = 150 - y + 'rpx';
				if(Math.abs(x) > Math.abs(y)) {
					if(x > 0 && Math.abs(x) >= 50) {
						//下面
						this.handleChangeIcon('bot', true)
						this.longTapInterval && clearInterval(this.longTapInterval)
						this.longTapInterval = setInterval(() => {
							this.$mff.vibrate()
							this.$emit('handleChangeTelecontrol', 'bot')
						}, this.telecontrolTime)
					} else if(x < 0 && Math.abs(x) >= 50) {
						//上面
						this.handleChangeIcon('top', true)
						this.longTapInterval && clearInterval(this.longTapInterval)
						this.longTapInterval = setInterval(() => {
							this.$mff.vibrate()
							this.$emit('handleChangeTelecontrol', 'top')
						}, this.telecontrolTime)
					} else {
						this.topIcon = this.botIcon = this.leftIcon = this.rightIcon = false
						this.longTapInterval && clearInterval(this.longTapInterval)
					}
				} else {
					if(y > 0 && Math.abs(y) >= 50) {
						//左面
						this.handleChangeIcon('left', true)
						this.longTapInterval && clearInterval(this.longTapInterval)
						this.longTapInterval = setInterval(() => {
							this.$mff.vibrate()
							this.$emit('handleChangeTelecontrol', 'left')
						}, this.telecontrolTime)
					} else if(y < 0 && Math.abs(y) >= 50) {
						//右面
						this.handleChangeIcon('right', true)
						this.longTapInterval && clearInterval(this.longTapInterval)
						this.longTapInterval = setInterval(() => {
							this.$mff.vibrate()
							this.$emit('handleChangeTelecontrol', 'right')
						}, this.telecontrolTime)
					} else {
						this.topIcon = this.botIcon = this.leftIcon = this.rightIcon = false
						this.longTapInterval && clearInterval(this.longTapInterval)
					}
				}
			},
			//圆点end
			handleMiddelTouchend: function(event) {
				this.moveY = '50%'
				this.moveX = '50%'
				this.topIcon = this.botIcon = this.leftIcon = this.rightIcon = false
				this.longTapInterval && clearInterval(this.longTapInterval)
			},
			
			//改变上下左右icon
			handleChangeIcon: function(type, status) {
				this.topIcon = this.botIcon = this.leftIcon = this.rightIcon = false	
				switch(type) {
					 case 'top':
							this.topIcon = status
							break;
					 case 'bot':
							this.botIcon = status
							break;
					case 'left':
						this.leftIcon = status
						break;
						case 'right':
							this.rightIcon = status
							break;
					 default:
							console.log('default')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>
